/**
 * Created by Administrator on 2017/9/23.
 */

    //实现轮播图
var oBox = document.getElementById('box');
var oUl = oBox.getElementsByTagName("ul")[0];
//克隆第一张图片到最后一张上面
oUl.appendChild(oUl.children[0].cloneNode(true));
var oLi = document.getElementsByClassName("lb");
var oSpan = document.getElementsByClassName("dian");

//鼠标点击轮播事件
for(var i=0;i<oSpan.length;i++){
    oSpan[i].index = i;
    //排他去小黄点
    oSpan[i].onclick = function(){
        for(var j=0;j<oSpan.length;j++){
            oSpan[j].id = "";
            console.log(1);
        }
        this.id = "active";
        animate(oUl,-this.index*1090);
    }
}
//图片自动轮播
//给图片设置自动轮播效果
var timer = setInterval(autoPlay,3000);

//自动播放函数
var imgIndex = 0;
var dianIndex = 0;

function autoPlay(){
    imgIndex++;
    if(imgIndex==4){
        imgIndex=1;
        oUl.style.left = 0+"px";
    }
    //调用动画
    animate(oUl,-1090*imgIndex);

    //对应的下标也要动
    dianIndex++;
    if(dianIndex==3){
        dianIndex=0;
    }

    //排他去小黄点
    for(var i=0;i<oSpan.length;i++){
        oSpan[i].id = "";
    }
    //单独给自己添加小黄点
    oSpan[dianIndex].id = "active";
}

//设置鼠标进入时停止自动播放图片
oBox.onmouseenter = function(){
    clearInterval(timer);
}

//设置鼠标离开时接着自动轮播图片
oBox.onmouseleave = function(){
    timer = setInterval(autoPlay,3000);
}

function animate(obj,target){
    clearInterval(obj.timer);

    //判断方向
    var step=target>obj.offsetLeft?10:-10;

    obj.timer=setInterval(function(){
        obj.style.left=obj.offsetLeft+step+"px";

        //判断什么时候停止定时器
        if(Math.abs(obj.offsetLeft-target)<=Math.abs(step)){
            obj.style.left = target+"px";
        }
    },10)
}
